<template>
  <div class="JsonDialog">
    <el-dialog :visible="dialogVisible" width="60%" top="1%" @close="close()">
      <h3>请复制生成表格数据</h3>
      <div ref="container" class="monaco-editor" style="height: 400px;width: 100%;"></div>
      <div style="width: 100%;margin-top:10px;text-align: right">
        <el-button @click="createTable()">生成表格</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api' // 引入编辑器
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' // 引入js语言
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js' // 引入查询控件
import { isJSON } from '@/utils/isJSON'

export default {
  name: 'JsonDialog',
  props: {
    // 事件总线
    pVue: {
      type: Object
    },
    // 弹窗控制
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      // 配置 - 代码编辑
      defaultOpts: {
        // value: `console.log('打印')`, // 编辑器的值
        value: '', // 编辑器的值
        language: 'javascript',
        // language: 'python',
        theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
        roundedSelection: true, // 右侧显示编辑器预览框
        autoIndent: true // 自动缩进
      },
      // 编辑最终数据
      newValue: ''
    }
  },
  mounted() {
    if (this.pVue) {
      this.pVue.$on('jsonDialog-init', data => this.init(data))
    }
  },
  methods: {
    /**
     * 【周期】 初始化
     */
    init(data) {
      console.log('初始化', data)
      // 初始化container的内容，销毁之前生成的编辑器
      this.$refs.container.innerHTML = ''
      // 当前表格数据
      this.defaultOpts.value = JSON.stringify(data)
      // 初始化数据
      this.newValue = JSON.stringify(data)
      // 生成编辑器对象
      this.monacoEditor = monaco.editor.create(this.$refs.container, this.defaultOpts)
      // 编辑器内容发生改变时触发
      this.monacoEditor.onDidChangeModelContent(() => {
        this.newValue = this.monacoEditor.getValue()
      })
    },
    /**
     * 【控制】 关闭弹窗
     */
    close() {
      this.$emit('update:dialogVisible', false)
    },
    createTable() {
      const boo = isJSON(this.newValue)
      if (boo) {
        const json = JSON.parse(this.newValue)
        this.pVue.$emit('create-table', json)
        this.$emit('update:dialogVisible', false)
      } else {
        this.$log(0, 'JSON解析失败')
      }
    }
  },
  filters: {}
}
</script>

<style lang="scss" scoped></style>
